<template>
	<view class="wrap">
		<!-- 头部背景 -->
		<view class="login-top">
			<view class="image-content">
				<image class="top-BgImage" src="../../static/login/login_topBg@2x.png" mode="heightFix"></image>
				<image class="top-logo" src="../../static/login/login_logo@2x.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 中间的登录模块 -->
		<view class="login-container">
			<view class="container-tip">
				您好！欢迎登录
			</view>
			
			<view class="container-box">
				<view class="u-flex input-box">
					<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" src="../../static/login/login_phone@2x.png" mode=""></image>
					<u-input placeholder="请输入账号" type="number" maxlength="11" v-model="accountInfo.account"></u-input>
				</view>
				<view class="u-flex input-box">
					<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" src="../../static/login/login_code@2x.png" mode=""></image>
					<u-input v-if="!isText" placeholder="请输入密码" :password="true" maxlength="20" v-model="accountInfo.password">
						<template slot="suffix">
							<u-icon name="eye-off" @click="isText = true" size="18"></u-icon>
						</template>
					</u-input>
					<u-input v-if="isText" placeholder="请输入密码" :password="false" maxlength="20" v-model="accountInfo.password">
						<template slot="suffix">
							<u-icon name="eye-fill" @click="isText = false" size="18" color="#247CFF"></u-icon>
						</template>
					</u-input>
				</view>
				<view class="u-flex input-box" v-if="isShowTenantCode">
					<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" src="../../static/login/login_code@2x.png" mode=""></image>
					<u-input placeholder="请输入商户号" maxlength="10" v-model="accountInfo.tenantCode"></u-input>
				</view>
				
				<!-- <view class="u-flex input-box">
					<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" src="../../static/login/login_code@2x.png" mode=""></image>
					<u-input placeholder="请输入验证码" type="number" maxlength="6" v-model="accountInfo.password"></u-input>
					<view style="display: flex;margin-left: 20rpx;">
						<u-code ref="uCode" @change="codeChange" keep-running start-text="点击发送"></u-code>
						<text @tap="getCode" class="code-text">{{codeTips}}</text>
					</view>
				</view> -->
				
			</view>
			<!-- <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
		</view>

<!--    <view>-->
<!--      <u-checkbox></u-checkbox>-->
<!--      登录代表您已阅读并同意<text>&lt&lt用户协议&gt&gt</text>、<text>&lt&lt隐私协议&gt&gt</text>-->
<!--    </view>-->
		
		<!-- 底部登录按钮及协议 -->
		<view style="margin: 15rpx 0 0 35px;display: flex;align-items: center;align-self: start;font-size: 23rpx;color: #666">
      <u-checkbox-group
          v-model="checkboxValue1"
          @change="checkboxChange"
      >
        <u-checkbox
            name="read"
        >
        </u-checkbox>
      </u-checkbox-group>
      已阅读并同意
      <text @click="goweb(305)" style="color: #3c9cff;">&laquo用户协议&raquo</text>、
      <text @click="goweb(304)" style="color: #3c9cff;">&laquo隐私协议&raquo</text>
<!--			<text style="color: #a7a7a7;">技术支持：深圳市行知网络科技有限公司</text>-->
		</view>

		<!-- 底部登录按钮及协议 -->
		<view class="login-bottom">
			<button class="login-margin" @click="login">登 录</button>
			<text style="color: #a7a7a7;">技术支持：深圳市行知网络科技有限公司</text>
		</view>
	</view>
</template>

<script>
	import md5Libs from "../../uni_modules/uview-ui/libs/function/md5.js"
	
	export default {
		data() {
			return {
        checkboxValue1:[],
				isText:false,
				accountInfo : {
					account : '',
					password : '',
					tenantCode : ''	
				},
				isShowTenantCode:false,
				codeTips: '',
				result:{}
			}
		},
		
		onLoad() {
			console.log('this.$u=>', this.$u);
			this.getShowTenantCode();
			
			
		},
		
		methods:{
      checkboxChange(e){
        console.log('点击了', e)
      },

      goweb(type){
        uni.navigateTo({
          url:'/pagesA/rich-text/rich-text?type='+type
        })
      },
			
			//倒计时按钮监听事件
			codeChange(text) {
				this.codeTips = text;
			},
			
		    //获取是否显示商户号
			getShowTenantCode(){
				// this.$u.api.getConfigParam().then(res=>{
				// 	this.isShowTenantCode = 1==res;
				// })
				
				//全部显示
				this.isShowTenantCode = true
			},
			
			// 获取验证码
			getCode() {
				
				if(!this.$u.test.mobile(this.accountInfo.account)){
					this.$u.toast('请输入正确的手机号');
					return
				}
				
				if(this.$u.test.isEmpty(this.accountInfo.tenantCode)){
					this.$u.toast('请输入商户号');
					return
				}
				
				if(!this.$refs.uCode.canGetCode){
					this.$u.toast('倒计时结束后再发送');
					return
				}
				
				var timestamp = new Date().getTime();
				console.log('时间戳'+ timestamp);
				var signBefore = this.accountInfo.account+timestamp+'1'+'TJFS_IOS_2017_002';
				var sign = md5Libs.md5(signBefore).toUpperCase();
				this.$u.api.sendVerificationCode({
					mobile : this.accountInfo.account,
					time: timestamp,
					type : "1",
					sign : sign,
					tag:"1",
					tenantCode:this.accountInfo.tenantCode
				}).then(res=>{
					//发送成功后开始倒计时
					this.$u.toast('验证码已发送,请注意查收');
					this.$refs.uCode.start();
				})
				
			},
			
			//登录接口
			login(){
				
				// this.result = 
						// {
				  //           userId:1,
				  //           username:"admin",
				  //           mobile:"13612345678",
				  //           deptName:"行知网络租售集团",
				  //           permissionsType:null,
				  //           realname:null,
				  //           userType:"1",
				  //           token:"2fe49e1ca9b1491db4735cfe9f73b574Q99pbhqZVnkoBKrjHLwckg==",
				  //           role:"管理员",
				  //           status:1,
				  //           tenantId:1
				  //       }
						
						// {
						// 	userId:38,
						// 	username:"admin",
						// 	mobile:"12399999999",
						// 	deptName:"知行租赁",
						// 	permissionsType:null,
						// 	realname:"审核管理者",
						// 	userType:"1",
						// 	token:"2fe49e1ca9b1491db4735cfe9f73b574Q99pbhqZVnkoBKrjHLwckg==",
						// 	role:"李蕊管理员",
						// 	status:1,
						// 	tenantId:8
						// }
						
						
						// {
						// 	userId:31,
						// 	username:"晓花测试账号",
						// 	mobile:"13200000000",
						// 	deptName:"test部门",
						// 	permissionsType:null,
						// 	realname:null,
						// 	userType:"1",
						// 	token:"d36de8d3e3c34bf683376e2b91c77bcb8fyM/hNKqcT800akAEx99w==",
						// 	role:"晓花测试账号管理员",
						// 	status:1,
						// 	tenantId:4
						// }
						
				// 		;
				
				// this.$store.commit('user/saveUserInfo', this.result);
				// uni.setStorageSync('saveUserInfo', this.result);
				
				// uni.switchTab({
				// 	url:'../work/work',
				// })
				
				
				if(!this.$u.test.mobile(this.accountInfo.account)){
					this.$u.toast('请输入正确的手机号');
					return
				}
				
				if(this.isShowTenantCode && this.$u.test.isEmpty(this.accountInfo.tenantCode)){
					this.$u.toast('请输入商户号');
					return
				}
				
				if(this.$u.test.isEmpty(this.accountInfo.password)){
					this.$u.toast('请输入验证码');
					return
				}

        if(uni.$u.test.isEmpty(this.checkboxValue1) || this.checkboxValue1.indexOf('read')<0){
          this.$u.toast('尚未阅读并同意用户协议及隐私协议');
          return
        }
				
				this.$u.api.login({
					mobile : this.accountInfo.account,
					veCode : this.accountInfo.password,
					tenantCode : this.accountInfo.tenantCode
				}).then(res=>{
					this.result = res;
					//通过vuex存储登录相关信息
					this.$store.commit('user/saveUserInfo', this.result);
					uni.setStorageSync('saveUserInfo', this.result);
					
					uni.switchTab({
						url:'../work/work',
					})
				})
				
			}
			
			
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>


<style lang="scss" scoped>
	
.wrap {
	display: flex;
	flex-direction: column;	
	align-items: center;
	position: relative;
	height: 100%;
    .login-top {
		text-align: center;
		width: 100%;
		line-height: 500rpx;
		.top-BgImage {
			height: 500rpx;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
		}
			
		.top-logo{
			width: 300rpx;
			height: 60rpx;	
			position: relative;
			margin-bottom: 100rpx;
		}
	}
		
	.login-container {
		background-color: $xz-bgColor-write;
		margin-top: -280rpx;
		text-align: center;
	    box-shadow: 0px 0px 2px $xz-bgColor-blue;
		width: 80%;
		line-height: 300rpx;
		z-index: 1;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
	}
	
	.login-bottom {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.image-content {
	margin-top: 150rpx;
}

.container-box {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    align-items: center;
	padding-bottom: 30rpx;
}
	
.container-tip {
	margin-top: 20rpx;
	color: #3d70bd;
	font-weight: bold;
	font-size: 43rpx;
	line-height: 43rpx;
	margin: 30rpx 0;
}

.input-box {
    margin: 10rpx 0rpx 30rpx;
	width: 90%;
	line-height: 100rpx;
}

.login-margin {
	background-color:$xz-bgColor-blue;
	color: $xz-textColor-FF;
	width: 85%;
	margin-bottom: 30rpx;
	border-radius: 90rpx;
}

.code-text{
	width: 180rpx;
	line-height: 60rpx;
	color: #fff;
	border-radius: 90rpx;
	text-align: center;
	font-size: 26rpx;
	background-color: $xz-bgColor-blue;
}

</style>
